{{>layout/header}}

{{>modals/set-variable-modal}}
{{>modals/cancel-instance-modal}}

<div class="row">

    <div class="col-md-12 mb-2">
        <div class="float-right">

            {{#instance.isRunning}}
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#setVariableModal">
                Set Variable
            </button>

            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cancelInstanceModal">
                Cancel Instance
            </button>
            {{/instance.isRunning}}

            {{^instance.isRunning}}
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#setVariableModal" disabled>
                Set Variable
            </button>

            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cancelInstanceModal"
                    disabled>
                Cancel Instance
            </button>
            {{/instance.isRunning}}

        </div>
    </div>

    <div class="col-md-2">

        <table class="table table-striped">
            {{#instance}}
            <tr>
                <th>Key</th>
                <td>{{processInstanceKey}}</td>
            </tr>
            <tr>
                <th>BPMN process id</th>
                <td>{{bpmnProcessId}}</td>
            </tr>
            <tr>
                <th>Version</th>
                <td>{{version}}</td>
            </tr>
            <tr>
                <th>Process Definition Key</th>
                <td>
                    <a href="{{context-path}}views/processes/{{processDefinitionKey}}">{{processDefinitionKey}}</a>
                </td>
            </tr>
            <tr>
                <th>State</th>
                <td>{{state}}</td>
            </tr>
            <tr>
                <th>Start Time</th>
                <td>{{startTime}}</td>
            </tr>
            <tr>
                <th>End Time</th>
                <td>{{endTime}}</td>
            </tr>

            {{#hasParentProcessInstance}}

            <tr>
                <th>Parent Process Instance</th>
                <td>
                    <a href="{{context-path}}views/instances/{{parentProcessInstanceKey}}">{{parentProcessInstanceKey}}</a>
                    ({{parentBpmnProcessId}})
                </td>
            </tr>

            {{/hasParentProcessInstance}}

            {{/instance}}
        </table>

    </div>

    <div class="col-md-10 mb-2">
        {{>components/bpmn-diagram}}
    </div>

    <div class="col-md-12">

        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link {{#content-variable-list-view}}active{{/content-variable-list-view}}"
                   id="nav-home-tab" href="{{context-path}}views/instances/{{instance.processInstanceKey}}/variable-list" role="tab"
                   aria-controls="nav-home" aria-selected="true">Variables</a>
                <a class="nav-item nav-link {{#content-audit-log-view}}active{{/content-audit-log-view}}"
                   id="nav-audit-tab" href="{{context-path}}views/instances/{{instance.processInstanceKey}}/audit-log" role="tab"
                   aria-controls="nav-contact" aria-selected="false">Audit Log</a>
                <a class="nav-item nav-link {{#content-incident-list-view}}active{{/content-incident-list-view}}"
                   id="nav-incidents-tab" href="{{context-path}}views/instances/{{instance.processInstanceKey}}/incident-list" role="tab"
                   aria-controls="nav-profile" aria-selected="false">Incidents</a>
                <a class="nav-item nav-link {{#content-job-list-view}}active{{/content-job-list-view}}"
                   id="nav-jobs-tab" href="{{context-path}}views/instances/{{instance.processInstanceKey}}/job-list" role="tab"
                   aria-controls="nav-contact" aria-selected="false">Jobs</a>
                <a class="nav-item nav-link {{#content-message-subscription-list-view}}active{{/content-message-subscription-list-view}}"
                   id="nav-message-subscriptions-tab"
                   href="{{context-path}}views/instances/{{instance.processInstanceKey}}/message-subscription-list" role="tab" aria-controls="nav-contact" aria-selected="false">Message
                    Subscriptions</a>
                <a class="nav-item nav-link {{#content-timer-list-view}}active{{/content-timer-list-view}}"
                   id="nav-timers-tab" href="{{context-path}}views/instances/{{instance.processInstanceKey}}/timer-list" role="tab"
                   aria-controls="nav-contact" aria-selected="false">Timers</a>
                <a class="nav-item nav-link {{#content-called-processes-list-view}}active{{/content-called-processes-list-view}}"
                   id="nav-called-processes-tab"
                   href="{{context-path}}views/instances/{{instance.processInstanceKey}}/called-processes-list" role="tab"
                   aria-controls="nav-contact" aria-selected="false">Called Process Instances</a>
                <a class="nav-item nav-link {{#content-error-list-view}}active{{/content-error-list-view}}"
                   id="nav-errors-tab"
                   href="{{context-path}}views/instances/{{instance.processInstanceKey}}/error-list" role="tab"
                   aria-controls="nav-contact" aria-selected="false">Errors</a>
            </div>
        </nav>
        <div class="tab-content detail-view-tab-content" id="nav-tabContent">

            {{#content-variable-list-view}}
                {{>variable-list}}
            {{/content-variable-list-view}}

            {{#content-audit-log-view}}
                {{>audit-log}}
            {{/content-audit-log-view}}

            {{#content-incident-list-view}}
                {{>incident-list}}
            {{/content-incident-list-view}}

            {{#content-job-list-view}}
                {{>job-list}}
            {{/content-job-list-view}}

            {{#content-message-subscription-list-view}}
                {{>message-subscription-list}}
            {{/content-message-subscription-list-view}}

            {{#content-timer-list-view}}
                {{>timer-list}}
            {{/content-timer-list-view}}

            {{#content-called-processes-list-view}}
                {{>called-processes-list}}
            {{/content-called-processes-list-view}}

            {{#content-error-list-view}}
                {{>error-list}}
            {{/content-error-list-view}}

        </div>

    </div>
</div>

{{>layout/footer}}

<script>
    $(document).ready(function () {
        subscribeForProcessInstance({{instance.processInstanceKey}});
    });
</script>
